<template>
  <div class="common-layout">
    <el-container class="el-container">
      <el-container>
        <!-- 轮播 -->

        <el-main style="--el-tag-bg-color: red">
          <div id="app">
            <div class="nav-bar">
              <img
                src="..\assets\images\天津滨海国际公司.png"
                class="header-logo"
              />
              <div id="nav">
                <router-link to="/">主页</router-link>
                <router-link to="/site">自助服务</router-link>
                <router-link to="/hotel">航空公司</router-link>
                <router-link to="/announcement">通知公告</router-link>
                <router-link to="/login">管理页面</router-link>
                <router-link to="/about">关于我们</router-link>
              </div>
              <router-view style="padding-top: 60px" />
            </div>
          </div>

          <div>
            <el-carousel :height="bannerHeight + 'px'">
              <el-carousel-item v-for="item in imgwrap" :key="item.url">
                <img :src="item.url" class="bannerimg" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 表格主内容 -->
          <div class="common-layout">
            <el-container>
              <el-header>
                <el-breadcrumb class="el-bread">
                  <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
                  <el-breadcrumb-item>航班信息</el-breadcrumb-item>
                  <el-breadcrumb-item>每日航班信息</el-breadcrumb-item>
                  <el-breadcrumb-item>XXX</el-breadcrumb-item>
                </el-breadcrumb>
              </el-header>

              <el-container>
                <el-aside width="200px">
                  <el-text style="font-size: 100"
                    ><img
                      src="..\assets\images\飞机图标.png"
                    />航班信息</el-text
                  >
                  <el-tree
                    :data="datatree"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-aside>
                <el-main>
                  <div>
                    <el-form ref="form" :model="form" label-width="100px">
                      <el-form-item label="请输入航班号:">
                        <el-row>
                          <el-col :span="50">
                            <el-input
                              style="width: 200%"
                              v-model="form.dfltFlno"
                            ></el-input>
                          </el-col>
                        </el-row>
                        <el-col :span="10">
                          <el-button
                            class="btn1"
                            type="primary"
                            @click="onSubmit"
                            >查询</el-button
                          >
                        </el-col>
                      </el-form-item>
                      <div class="link-top"></div>
                      <el-form-item label="起始站">
                        <el-input
                          style="width: 400px"
                          v-model="form.apcd"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="日期">
                        <el-col :span="1">
                          <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.dtime"
                            style="width: 200px"
                            @change="updateDateTime"
                          ></el-date-picker>
                        </el-col>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="onSubmit"
                          >搜索</el-button
                        >
                      </el-form-item>
                    </el-form>
                  </div>

                  <!-- 数据表 -->
                  <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                  >
                    <el-table-column
                      property="dfltFlno"
                      label="航班号"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      property="dfltAwcd"
                      label="航空公司"
                      width="200"
                    >
                    </el-table-column>
                    <el-table-column property="apcd" label="航线" width="150">
                    </el-table-column>
                    <el-table-column property="dtime" label="日期" width="200">
                    </el-table-column>
                    <el-table-column
                      property="fptt"
                      label="计划起飞时间"
                      width="220"
                    >
                    </el-table-column>
                    <el-table-column
                      property="frtt"
                      label="实际起飞时间"
                      width="220"
                    >
                    </el-table-column>
                  </el-table>
                  <!-- 分页组件 -->
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="count"
                    :current-page="page"
                    :pageCount="pageCount"
                    @current-change="changePage"
                  >
                  </el-pagination>
                </el-main>
              </el-container>
            </el-container>
          </div>
        </el-main>

        <el-footer class="el-footer"> </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
.bannerimg {
  width: 100%;
  height: inherit;
}
.el-header {
  background-color: #ffffff;
  /* 给头部设置一下弹性布局 */
  display: flex;
  /* 让它贴标左右对齐 */
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.btn1 {
  margin-left: -100 px;
  margin-top: 15px;
}
.link-top {
  width: 100%;
  height: 30px;
  border-top: 6px dashed #ccc;
  border-bottom: 10px;
  top: 10px;
}
.nav-bar {
  position: fixed;
  z-index: 10;
  width: 100%;
}

el-menu-item {
  height: 30px;
}

.personal-wrapper {
  text-align: center;
}

.header-logo {
  height: 50px;
  position: fixed;
  left: 10px;
  top: 5px;
  z-index: 10;
}

.login-icon {
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 2px lightgray;
  cursor: pointer;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  border-bottom: solid 0.5px #42b983;
  background-color: 4FC0D0;
  padding: 20px;
  position: fixed;
  width: 100%;
  top: 0px;
  text-align: center;

  a {
    font-weight: normal;
    color: #2c3e50;
    text-decoration: none;
    margin-left: 80px;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

<script>
import pic1 from "../assets/images/pic1.jpg";
import pic2 from "../assets/images/pic2.jpg";
import pic3 from "../assets/images/pic3.jpg";
import pic4 from "../assets/images/pic4.jpg";
import pic5 from "../assets/images/pic5.jpg";
import { ElMessageBox } from "element-plus";

export default {
  data() {
    return {
      bannerHeight: 300,
      imgwrap: [
        { url: pic1 },
        { url: pic2 },
        { url: pic3 },
        { url: pic4 },
        { url: pic5 },
      ],
      selectLabel: 0,
      tableDataType: 1,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}], //图书分页数据
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      // data: [], //存放分页数据
      categoryData: "",
      childrenList: ["国际离港", "国内离港", "国际到港", "国内到港"],
      labelList: ["每日航班信息", "通用航空公司"],
      defaultList: ["当前位置", "航班信息"], //默认的导航栏路径
      breadcrumbList: [], //动态的导航栏路径

      form: {
        dfltAwcd: "",
        dfltFlno: "",
        apcd: "",
        startDate: "",
        // endDate: "",
        dtime: "2017-06-01T00:00:00.000Z",
      },
      active: "",
      datatree: [
        {
          label: "每日航班信息",
          children: [
            {
              label: "国内/国际离港",
              dataUrl: "http://localhost:8888/dfdl2/getA",
            },
            {
              label: "国内/国际到港",
              dataUrl: "http://localhost:8888/dfdl2/getD",
            },
          ],
        },
        {
          label: "通用航空公司",
          children: [
            {
              label: "通航航空公司",
              dataUrl: "",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleNodeClick(label, dataUrl) {
      // console.log(dataUrl.data.label);
      if (
        dataUrl.data.label != "每日航班信息" &&
        dataUrl.data.label != "通用航空公司"
      ) {
        // console.log(dataUrl);
        this.active = dataUrl.data.dataUrl;
        this.fetchData(this.active);
        if (dataUrl.data.label == "国内/国际离港") {
          this.selectLabel = 1;
        } else if (dataUrl.data.label == "国内/国际到港") {
          this.selectLabel = 2;
        }
      }
    },
    changePage(currentPage) {
      this.page = currentPage;
      switch (this.tableDataType) {
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },
    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get(this.active || "", { params: { pageNum, pageSize } })
        .then((response) => {
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
          this.tableDataType = 1;
          console.info(this.tableData);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    combiningStrings(date) {
      var mon = date.substring(4, 7);
      var year = date.substring(11, 15);
      var day = date.substring(8, 10);
      var detail = date.substring(16, 24);
      let detail1 = date.substring(16, 18);
      let detail2 = date.substring(19, 21);
      let detail3 = date.substring(22, 24);
      // console.info(detail);
      // console.info(day);
      // console.info(year);
      switch (mon) {
        case "Jan":
          mon = "01";
          break;
        case "Feb":
          mon = "02";
          break;
        case "Mar":
          mon = "03";
          break;
        case "Apr":
          mon = "04";
          break;
        case "May":
          mon = "05";
          break;
        case "Jun":
          mon = "06";
          break;
        case "Jul":
          mon = "07";
          break;
        case "Aug":
          mon = "08";
          break;
        case "Sep":
          mon = "09";
          break;
        case "Oct":
          mon = "10";
          break;
        case "Nov":
          mon = "11";
          break;
        case "Dec":
          mon = "12";
          break;
      }
      console.info(mon);
      let combineDate = year + mon + day + detail1 + detail2 + detail3;
      return combineDate;
    },
    onSubmit() {
      const pageNum = this.page;
      const pageSize = 10;
      const dfltFlno = this.form.dfltFlno;
      const dtime = this.form.dtime;
      const apcd = this.form.apcd;
      const fptt = this.form.startDate;
      const fplt = this.form.endDate;
      const dfltAwcd = "";
      this.$axios
        .get("http://localhost:8888/dfdl/selectA2401", {
          params: {
            dfltFlno,
            dtime,
            dfltAwcd,
            apcd,
            fptt,
            fplt,
            pageNum,
            pageSize,
          },
        })
        .then((response) => {
          const result = response.data.data;
          console.info(result);
          if (response.data.status != 10000) {
            this.$message.error({
              type: "error",
              message: "查询失败，没有数据",
            });
          }
          //   console.info(result);
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
          if (result.list.length != 0 && !this.called) {
            this.tableDataType = 2;
            this.$message.success({
              type: "success",
              message: "查询成功",
            });
            this.called = true;
          }
        });
    },

    onSubmitFlno() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      console.info(this.tableData);
      console.info(111);
      var dfltFlno = this.form.dfltFlno;
      switch (this.selectLabel) {
        case 1:
          this.$axios
            .get("http://localhost:8888/dfdl/selectD2401ByFlno", {
              params: { dfltFlno, pageNum, pageSize },
            })
            .then((response) => {
              const results = response.data.data;
              this.count = results.size;
              this.pageCount = Math.ceil(results.total / pageSize);
              this.tableData = results.list;
              console.info(this.tableData);
            })
            .catch((error) => {
              console.error(error);
            });
          break;
        case 2:
          this.$axios
            .get("http://localhost:8888/dfdl/selectA2401ByFlno", {
              params: { dfltFlno, pageNum, pageSize },
            })
            .then((response) => {
              const result1 = response.data.data;
              this.count = result1.size;
              this.pageCount = Math.ceil(result1.total / pageSize);
              this.tableData = result1.list;
              console.info(this.tableData);
            })
            .catch((error) => {
              console.error(error);
            });
          break;
      }
    },
  },
  mounted() {
    const objApp = this;
    // this.changePage(1);
    ElMessageBox.alert("如需查看更多信息，请登录后查看", "提示", {
      confirmButtonText: "确定",
    });
  },
};
</script>



